<script setup lang="ts">
import { ref, onMounted } from 'vue';
import ico1 from '@/assets/images/hbMarket/ico_1.png';

const noticeWidth = ref(0);

onMounted(() => {
  const notice = document.querySelector('.van-notice-bar__wrap');
  noticeWidth.value = notice?.clientWidth || 0;
});

withDefaults(defineProps<{ msgList: string[] }>(), {
  msgList: () => [],
});
</script>
<template>
  <van-notice-bar class="!bg-white rounded !h-[27px]" scrollable color="#1A1A1A">
    <template #default>
      <div class="flex">
        <div
          class="text-xs"
          v-for="(msg, idx) in msgList"
          :key="idx"
          :style="{ marginLeft: idx === 0 ? `${noticeWidth}px` : `${(noticeWidth * 0.5).toFixed(0)}px` }"
        >
          {{ msg }}
        </div>
      </div>
    </template>
    <template #left-icon>
      <van-image class="mr-2" width="30px" height="12px" :src="ico1" />
    </template>
  </van-notice-bar>
</template>
<style lang="less" scoped>
.noticeBar {
}
</style>
